<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>类名批量修改样式</title>
		<style>
			.bg-blue {
				background-color: blue;
			}
			.bg-red {
				background-color: red;
			}
		</style>
	</head>
	<body>
		<!-- 鼠标经过偶数数字背景变红色，经过奇数数字背景变蓝色
		 鼠标离开后，背景颜色还原
		 -->
		<ul>
			<li class="nn">1</li>
			<li class="nm">2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
		</ul>
		
		<script>
				// 定位偶数的元素
				var oushuLi = document.querySelectorAll('li:nth-child(2n)');
				console.log(oushuLi);
				// 偶数的事件批量绑定
				// 利用循环进行批量绑定
				for(var i=0; i<oushuLi.length; i++){
					// 鼠标进入事件
					oushuLi[i].onmouseover=function(){
						this.classList.toggle('bg-red');
					}
					// 鼠标离开事件
					oushuLi[i].onmouseout=function(){
						this.classList.toggle('bg-red');
					}
				}
				
				// 定位偶数的元素
				// var jishuLi = document.querySelectorAll('li:nth-child(2n+1)');
				// console.log(jishuLi);
				// // 偶数的事件批量绑定
				// // 利用循环进行批量绑定
				// for(var i=0; i<jishuLi.length; i++){
				// 	// 鼠标进入事件
				// 	jishuLi[i].onmouseover=function(){
				// 		this.className +='bg-blue';
				// 	}
				// 	// 鼠标离开事件
				// 	jishuLi[i].onmouseout=function(){
				// 		this.className -='bg-blue';
				// 	}
				// }
				
				
		</script>
	</body>
</html>